<template>
    <div>
        <Header></Header>
        <div class="body">
            <div class="main">
                <personCenter v-if="currentType === 'personCenter'"></personCenter>
                <toRegister v-if="currentType !== 'personCenter'" @toPersonCenter="toPersonCenter" :registerId="registerId"></toRegister>
            </div>
        </div>
    </div>
</template>

<script>
    import personCenter from  '../../../components/personCenter/index'
    import toRegister from '../../../components/toRegister/index'
    import Header from "../../../components/header/Header";
    import {useRoute} from "vue-router";
    import {profile} from "../../../request/api";
    import {reactive,toRefs} from 'vue'
    export default {
        name: "index",
        setup(){
            let data = reactive({
                registerId:'',
                currentType:''
            })
            let route = useRoute();
            data.registerId = route.params.registerId

            let toPersonCenter = (type) =>{
                data.currentType = type
                console.log(data.currentType)
            }
            return{
                toPersonCenter,
                ...toRefs(data)
            }
        },
        components:{
            Header,
            toRegister,
            personCenter
        }
    }
</script>

<style scoped>
    .body{
        width: 100%;
        background-color: rgba(245, 246, 250, 1);
        padding-top: 70px;
        min-height: calc(100vh - 87px);
    }
    .main{
        width: 1200px;
        margin: 0 auto;
        margin-top: 20px;
    }
</style>
